//base
:root {
  --crp-colors-primary-base: #8059ff;

  --crp-z-index-normal: 1;
  --crp-z-index-top: 1000;
  --crp-z-index-popper: 2000;

  --crp-font-size-titel-large: 34px;
  --crp-font-size-extra-large: 20px;
  --crp-font-size-large: 18px;
  --crp-font-size-medium: 16px;
  --crp-font-size-base: 14px;
  --crp-font-size-small: 13px;
  --crp-font-size-extra-small: 12px;

  --crp-border-radius-small: 4px;
  --crp-border-radius-middle: 6px;
  --crp-border-radius-base: 8px;
  --crp-border-radius-large: 12px;
  --crp-border-radius-round: 20px;
  --crp-border-radius-circle: 100%;

  --crp-padding-extra-large: 32px;
  --crp-padding-large: 24px;
  --crp-padding-medium: 20px;
  --crp-padding-base: 16px;
  --crp-padding-small: 8px;
  --crp-padding-middle: 6px;
  --crp-padding-extra-small: 4px;

  --crp-margin-extra-large: 32px;
  --crp-margin-large: 24px;
  --crp-margin-medium: 20px;
  --crp-margin-base: 16px;
  --crp-margin-middle: 12px;
  --crp-margin-little: 10px;
  --crp-margin-small: 8px;
  --crp-margin-extra-small: 4px;
}

//theme
:root {
  --crp-bg-color: #ffffff;
  --crp-bg-color-primary: #e6ddff;
  --crp-bg-color-tag: #f4f3ff;
  --crp-bg-color-area: #ffffff;
  --crp-bg-color-message: #dbd0ff;

  --crp-border-color-tag: #898b8f;
  --crp-border-color: #e3e4e6;
  --crp-border-color-btn: #dbd0ff;

  --crp-text-color-important: #2e3033;
  --crp-text-color-primary: #666f80;
  --crp-text-color-secondary: #8a8f99;
  --crp-text-color-placeholder: #a1a7b3;

  --crp-icon-color-primary: #525967;
  --crp-icon-color-secondary: #9d94ba;

  --crp-background-image-logo: '@/assets/img/logo.png';
  --crp-background-image-web: '@/assets/img/web-bg.png';
  --crp-background-image-chat: '@/assets/img/chat-bg.png';

  --crp-divider-color: #e6e8eb;
}

//nav
:root {
  --crp-z-index-nav: var(--crp-z-index-top);
}

//el-ui
:root {
  --el-color-primary-light-9: var(--crp-bg-color-primary);
  --el-color-primary-light-7: var(--crp-border-color);
  --el-color-primary: var(--crp-colors-primary-base);
  --el-fill-color-light: var(--crp-bg-color-tag);
  --el-popover-padding: var(--crp-padding-small);
}

// :deep(.el-button) {
//   --el-button-hover-bg-color: var(--crp-bg-color-primary);
//   --el-button-hover-border-color: var(--crp-border-color);
//   --el-button-hover-text-color: var(--crp-text-color-primary);
// }
